<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>类型选择</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <!-- <link href="../css/iOS/mobile/mobile.css" rel="stylesheet"> -->
</head>

<body>
    <div class="choose-list">
        <!-- header -->
        <div class="mui-content mui-row mui-fullscreen">
            <div class="mui-col-xs-3">
                <div id="segmentedControls"
                    class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                    <div>
                        <a class="mui-control-item mui-active" href="#content1">养殖业</a>
                        <a class="mui-control-item" href="#content2">种植业</a>
                        <a class="mui-control-item" href="#content3">国家政策</a>
                        <a class="mui-control-item" href="#content4">生产加工</a>
                    </div>
                </div>
            </div>
            <div id="segmentedControlContents" class="mui-col-xs-9">
                <div id="content1" class="mui-control-content mui-active">
                    <div class="widget-default widget-body">
                        <!--  -->
                        <div>
                            <p class="font-14 black font-weight">水果</p>
                            <div class="display-flex flex-warp justify-content-between">
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10 choose-bg">猕猴桃</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猕猴桃</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猕猴桃</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                                <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                            </div>
                        </div>
                        
                        <!--  -->
                        <p class="font-14 black font-weight">蔬菜</p>
                        <div class="display-flex flex-warp justify-content-between">
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猕猴桃</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猕猴桃</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猕猴桃</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">香蕉</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                            <span class="btn-choose font-13 margin-l-10 gray margin-b-10">猴桃</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <!-- <script>
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        var controls = document.getElementById("segmentedControls");
        var contents = document.getElementById("segmentedControlContents");
        var html = [];
        var i = 1,
            j = 1,
            m = 5, //左侧选项卡数量+1
            n = 21; //每个选项卡列表数量+1
        for (; i < m; i++) {
            html.push("<a class="mui-control-item" href="#content" + i + "">选项" + i + "</a>");
        }
        controls.innerHTML = html.join("");
        html = [];
        for (i = 1; i < m; i++) {
            html.push("<div id="content" + i + "" class="mui-control-content"><ul class="mui-table-view">");
            for (j = 1; j < n; j++) {
                html.push("<li class="mui-table-view-cell">第" + i + "个选项卡子项-" + j + "</li>");
            }
            html.push("</ul></div>");
        }
        contents.innerHTML = html.join("");
        //默认选中第一个
        controls.querySelector(".mui-control-item").classList.add("mui-active");
        contents.querySelector(".mui-control-content").classList.add("mui-active");
    </script> -->
</body>

</html>